<template>
  <div class="dashboard-editor-container">
    <div class="head_color">
      <div class="head_center">
        <div class="head_title" style="float: left;cursor: pointer;" @click="toFYLZ">
          {{sysName}}
        </div>
        <div style="float: right;">
          <el-menu :default-active="activeIndex"
                   router
                   class="el-menu-demo" mode="horizontal"
                   background-color="#006BB7"
                   text-color="#EAF2ED"
                   active-text-color="#ffd04b">
            <el-menu-item index="/planeFace">平面图</el-menu-item>
            <el-menu-item index="/monitorVideo">监控一览</el-menu-item>
            <el-menu-item index="/monitorVideoGz">关注监控</el-menu-item>
            <el-menu-item index="/frontEndIndex">设备列表</el-menu-item>
            <el-menu-item @click="toGFBC">共富班车</el-menu-item>
            <el-menu-item index="/relFace">发布界面</el-menu-item>
            <el-menu-item index="/index">后台管理</el-menu-item>
            <el-menu-item >
              <el-dropdown class="right-menu-item hover-effect" trigger="click">
                <div style="color: #EAF2ED;">
                  系统管理员
                  <i class="el-icon-caret-bottom" style="color: #EAF2ED;" />
                </div>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item divided >
                    <span><a href="WebComponentsKit.exe" target="_blank" download="WebComponentsKit.exe">视频组件</a></span>
                  </el-dropdown-item>
                  <el-dropdown-item divided @click.native="logout">
                    <span>退出登录</span>
                  </el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </el-menu-item>

          </el-menu>
        </div>
      </div>
    </div>

    <div style="width: 1170px;margin-left: auto;margin-right: auto;">
      <el-row>
        <el-col :span="12" v-for="(collectPoint, index) in collectPointList" :key="collectPoint.id" >

          <el-card :body-style="{ padding: '10px' }" style="margin: 10px;">
            <el-row>
              <el-col :span="7">
                <el-card :body-style="{ padding: '2px' }" style="width: 126px;height: 126px;" >
                  <img v-if="collectPoint.pic == null || collectPoint.pic == ''" :src="siteUrl" class="image" style="width: 120px;height: 120px;">
                  <img v-else :src="collectPoint.pic" class="image" style="width: 120px;height: 120px;">
                </el-card>
              </el-col>
              <el-col :span="17">
                <el-row>
                  <el-col :span="17">
                    <div>
                    <el-button
                      size="mini"
                      type="text"
                      @click="showDetail(collectPoint)"
                    ><span style="font-size: 18px;">{{collectPoint.name}}</span></el-button>
                    </div>
                    <div style="padding: 5px;">
                      <span>状态：</span>
                      <span v-if="collectPointStatusMap[collectPoint.id].status === 'OnLine'" style="color: #13ce66">在线</span>
                      <span v-else-if="collectPointStatusMap[collectPoint.id].status === 'F'" style="color: #C90000">故障</span>
                      <span v-else style="color: #8c939d;">离线</span>
                    </div>
                    <div style="padding: 5px;height: 65px;">
                        <span class="mySpan"><el-scrollbar style="height: 100%;">备注：{{collectPoint.remark}}</el-scrollbar></span>
                    </div>
                  </el-col>
                  <el-col :span="7">
                    <div class="animImage" style="padding: 20px;" v-if="isAlarm">
                      <img :src="require('@/assets/image/alarm.png')" style="width: 70px;height: 70px;filter: brightness(100%);">
                    </div>
                  </el-col>
                </el-row>

              </el-col>
            </el-row>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <el-dialog :title="detailTitle" :visible.sync="detailOpen" width="1240px" append-to-body >
      <siteDetail :collectPoint="collectPointVo" />
    </el-dialog>

  </div>
</template>

<script>
  import { listCollectPointAndStatus } from "@/api/basic/collectPoint";
  import siteDetail from "./frontEnd/siteDetail";
  const defaultSettings = require('../settings.js');

export default {
  name: 'FrontEndIndex',
  components: { siteDetail },
  data() {
    return {
      siteUrl:require('@/assets/image/site.jpeg'),
      sysName: defaultSettings.title,
      activeIndex: '/frontEndIndex',
      // 测点管理表格数据
      collectPointList: [],
      collectPointStatusMap:{},
      detailTitle:'',
      detailOpen:false,
      collectPointVo:{},
      isAlarm:false,
    }
  },
  created() {
    this.getList();
  },
  methods: {
    toFYLZ(){
      window.open('https://fylz.zjagri.cn/ppthtml/index.html','_blank')
    },
    toGFBC(){
      window.open('https://www.danss.work/lszx/','_blank')
    },
    async logout() {
      this.$confirm('确定注销并退出系统吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$store.dispatch('LogOut').then(() => {
          location.href = '/index';
        })
      })
    },
    showDetail(collectPoint){
      this.collectPointVo = collectPoint;
      this.detailTitle = '【'+collectPoint.name+'】详细信息';
      this.detailOpen = true;
    },
    /** 查询测点管理列表 */
    getList() {
      listCollectPointAndStatus().then(response => {
        this.collectPointList = response.collectPoints;
        this.collectPointStatusMap = response.collectPointStatus;
      });
    },
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    }
  }
}
</script>
<style>
  .animImage {
    -webkit-animation-name: imageAnim;
    -webkit-animation-duration: 0.5s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;
    -webkit-animation-timing-function: ease;
    -webkit-animation-play-state: running;
  }
  @-webkit-keyframes imageAnim{
    0% {opacity: 1;}
    50% {opacity: 0.5;}
    100% {opacity: 0;}
  }
</style>
<style scoped lang="scss">
  .mySpan ::v-deep .el-scrollbar__wrap {
    overflow-x: hidden;
  }
</style>
